<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>支付中心</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <div class="container">
      <h1>支付中心</h1>

      <div id="order-info" class="hidden">
        <div class="order-details">
          <h2>订单信息</h2>
          <div class="info-row">
            <span class="label">订单号:</span>
            <span id="order-id" class="value"></span>
          </div>
          <div class="info-row">
            <span class="label">描述:</span>
            <span id="order-description" class="value"></span>
          </div>
          <div class="info-row">
            <span class="label">金额:</span>
            <span id="order-amount" class="value"></span>
          </div>
        </div>
      </div>

      <div id="manual-form" class="payment-form">
        <h3>自定义支付</h3>
        <div class="form-group">
          <label for="amount">金额 (元)</label>
          <input
            type="number"
            id="amount"
            min="0.01"
            step="0.01"
            value="10.00"
          />
        </div>

        <div class="form-group">
          <label for="currency">货币</label>
          <select id="currency">
            <option value="cny" selected>人民币 (CNY)</option>
            <option value="usd">美元 (USD)</option>
            <option value="eur">欧元 (EUR)</option>
          </select>
        </div>

        <div class="form-group">
          <label for="description">描述</label>
          <input type="text" id="description" value="测试支付" />
        </div>

        <div class="form-group">
          <label for="order-id-input">订单ID (可选)</label>
          <input type="text" id="order-id-input" placeholder="自定义订单ID" />
        </div>
      </div>

      <button id="create-payment" class="btn">创建支付</button>

      <div id="payment-element-container" class="hidden">
        <div id="payment-element"></div>
        <button id="submit-payment" class="btn">确认支付</button>
        <div id="payment-message"></div>
      </div>

      <div id="cancel-container" class="hidden">
        <button id="cancel-payment" class="btn secondary-btn">取消支付</button>
      </div>

      <div class="logs">
        <h3>支付日志</h3>
        <pre id="payment-logs"></pre>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>
